<template>
	<a-card title="分组管理" :bordered="false">
		<!-- Card Header -->
		<template slot="extra">
			<a-form-model layout="inline" @submit.prevent="searchSubmit">
				<a-form-model-item>
					<a-input v-model="searchForm.code"
							 :allowClear="$store.getters.allowClear"
							 placeholder="分组代码"></a-input>
				</a-form-model-item>
				<a-form-model-item>
					<a-input v-model="searchForm.name"
							 :allowClear="$store.getters.allowClear"
							 placeholder="分组名称"></a-input>
				</a-form-model-item>
				<a-form-model-item>
					<a-input v-model="searchForm.description"
							 :allowClear="$store.getters.allowClear"
							 placeholder="备注"></a-input>
				</a-form-model-item>
				<a-form-model-item>
					<a-button icon="search" type="primary" html-type="submit">搜索</a-button>
				</a-form-model-item>
				<a-form-model-item>
					<a-button icon="plus" type="danger" @click="openEdit()">新建</a-button>
				</a-form-model-item>
			</a-form-model>
		</template>
		<!-- 表格开始 -->
		<a-table   :columns="columns" :rowKey="record => record.id" :dataSource="dataSource" :pagination="pagination"
		 :loading="loading" @change="handleTableChange"
		>
			<!-- 操作插槽 -->
			<template slot="operation" slot-scope="text, record">
				<a @click="openEdit(record)">编辑</a>
				<a-divider type="vertical" />
				<a-popconfirm :title="`确定要删除【 ${record.name} 】这个分组吗?`"
							  @confirm="() => delgroup(record)"><a>删除</a>
				</a-popconfirm>
			</template>
		</a-table>
		<EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord" />
	</a-card>
</template>
<script>
	import {
		pagination,
		groupTable
	} from '../public/colums.js';
	import {
		groupList,
		groupDel,

	} from '../public/http.js';
	export default {
		components: {
			EditBox:()=>import('./edit.vue') ,

		},
		data() {
			return {
				editShow: false, //打开编辑器
				editRecord: {}, //正在编辑的记录
				dataSource: [],
				pagination: { ...pagination
				}, //复制预设的分页参数
				loading: false, //表格loading
				columns: groupTable, //表头管理
				searchForm: {
					code: '',
					name: '',
					description: '',
				},
			};
		},
		methods: {
			//1.0 获取表格数据
			getTableList() {
				this.loading = true;
				let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
				groupList(this.pagination, searchData).then(res => {
					this.loading = false;
					if (res.code === 0) {
						this.dataSource = res.data.result; //表格数据
						this.pagination.total = res.data.total; //总记录条数
					}
				});
			},
			//1.2翻页监听
			handleTableChange(pagination) {
				this.pagination.current = pagination.current;
				this.pagination.pageSize = pagination.pageSize;
				this.getTableList();
			},
			//2.0打开编辑器
			openEdit(obj = {}) {
				this.editRecord = obj;
				this.editShow = true;
			},
			//2.1 关闭编辑器
			closeEdit(e) {
				this.editShow = false;
				if (e.render) {
					this.getTableList();
				}
			},
			//3.0 搜索提交
			searchSubmit() {
				this.pagination.current = 1;
				this.getTableList();
			},
			//4.0删除分组
			delgroup(record) {
				this.loading = true;
				groupDel(record.id).then(res => {
					if (res.code == 0) {
						//成功提醒
						this.$notification.success({
							message: '操作成功',
							description: res.message
						});
						this.getTableList();
					} else {
						//错误提醒
					this.$notification.warning(res.message);
					}
					this.loading = false;
				});
			},
			 //数据初始化
					async init() {
						this.getTableList();
					}
		},
		created() {
			this.init();
		}
	};
</script>
